<template>
	<div class="footer-player">
		<!-- 最底部的播放器 -->
		<div class="footer">
			<!-- 播放的进度条 start -->
			<div class="range">
				<input
					type="range"
					:min="rangeMin"
					v-model="rangeValue"
					:max="rangeMax"
					@input="handleInput"
					@change="rangeChange"
					:style="{ 'background-size': background_size }"
				/>
			</div>
			<!-- 播放的进度条 end -->

			<!-- 播放器的主功能 start -->
			<el-row>
				<el-col :span="8">
					<!-- 专辑 start -->
					<div class="album" v-if="playSongList.length !== 0">
						<!-- 专辑图片 start -->
						<div class="album-picture" @click="lyricShow">
							<img
								:src="
									nowPlayMusic.songimg
										? nowPlayMusic.songimg
										: require('../assets/img/kugou.png')
								"
							/>
							<div class="fill-screen">
								<i
									title="查看歌词写真"
									:style="{ transform: imgTransform }"
									>&#xe60f;</i
								>
							</div>
						</div>
						<!-- 专辑图片 end -->

						<!-- 专辑的其它 start -->
						<div class="album-other">
							<!-- 专辑名称 start -->
							<div
								class="album-name"
								v-if="nowPlayMusic.title !== null"
							>
								{{ nowPlayMusic.author }} -
								{{ nowPlayMusic.title }}
							</div>
							<div class="album-name" v-else>
								佚名
							</div>
							<!-- 专辑名称 end -->

							<!-- 专辑功能 start -->
							<div class="album-function">
								<div class="love">
									<i title="我喜欢">&#xe600;</i>
								</div>
								<div class="download">
									<i title="下载">&#xe61b;</i>
								</div>
								<div class="comment">
									<i title="打开歌曲评论">&#xe639;</i>
								</div>
								<div class="more">
									<i title="更多">&#xe64d;</i>
								</div>
							</div>
							<!-- 专辑功能 start -->
						</div>
						<!-- 专辑的其它 end -->
					</div>
					<!-- 专辑 end -->
				</el-col>
				<el-col :span="8">
					<!-- 播放控件 start -->
					<div class="play-control">
						<div class="previous">
							<i title="上一首">&#xe624;</i>
						</div>
						<div class="play">
							<i title="播放" v-if="!isPlay" @click="play"
								>&#xe627;</i
							>
							<i title="暂停" v-else @click="paused">&#xe62d;</i>
						</div>
						<div class="next">
							<i title="下一首">&#xe624;</i>
						</div>
					</div>
					<!-- 播放控件 end -->
				</el-col>
				<el-col :span="8">
					<!-- 音乐控件 start -->
					<div class="music-control">
						<!-- 时间 start -->
						<div class="time">
							<span class="current-time">{{ currentTime }}</span
							>/<span class="duration-time">{{
								nowPlayMusic.time
							}}</span>
						</div>
						<!-- 时间 end -->

						<!-- 音量 start -->
						<div class="volume" @mouseover="vloumeShow">
							<div class="block" @mouseout="vloumeHide">
								<el-slider
									v-model="volume"
									vertical
									height="200px"
								>
								</el-slider>
								<div class="number">{{ volume }}%</div>
							</div>
							<i title="静音" v-if="volume >= 50" @click="mute"
								>&#xe63d;</i
							>
							<i
								title="静音"
								v-else-if="volume < 50 && volume > 0"
								@click="mute"
								>&#xe63c;</i
							>
							<i title="取消静音" v-else @click="cancelmute"
								>&#xe63b;</i
							>
						</div>
						<!-- 音量 end -->

						<!-- 播放顺序 start -->
						<div class="play-sequence">
							<i
								title="顺序播放"
								v-if="playSequence == 'sequencePlay'"
								>&#xe7ba;</i
							>
							<i
								title="随机播放"
								v-else-if="playSequence == 'shufflePlay'"
								>&#xe646;</i
							>
							<i title="单曲循环" v-else>&#xeaac;</i>
						</div>
						<!-- 播放顺序 end -->

						<!-- 歌词 start -->
						<div class="lyric">
							<i title="歌词">&#xe6d0;</i>
						</div>
						<!-- 歌词 end -->

						<!-- 播放队列 start -->
						<div class="play-list">
							<i title="播放队列"
								>&#xe602;
								<span>{{ playSongList.length }}</span>
							</i>
						</div>
						<!-- 播放队列 end -->
					</div>
					<!-- 音乐控件 end -->
				</el-col>
			</el-row>
			<!-- 播放器的主功能 end -->
		</div>
		<!-- 歌词页面 start -->
		<div
			class="lyricPage"
			:style="{ transform: lyrictransform, 'background-image': bgImg }"
		>
			<div class="bg-filter"></div>
			<div class="music-name">
				{{ nowPlayMusic.title }}
			</div>
			<div class="singer-name">
				{{ nowPlayMusic.author }}
			</div>
			<div class="singer-img">
				<img
					:src="
						nowPlayMusic.songimg
							? nowPlayMusic.songimg
							: require('../assets/img/kugou.png')
					"
				/>
			</div>
			<div class="lyric-all" v-if="nowPlayMusic.lyric">
				<div class="lyric-content"></div>
			</div>
			<div class="null-lyric" v-else>
				纯音乐，请欣赏
			</div>
		</div>
		<!-- 歌词页面 end -->
	</div>
</template>
<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			// 音乐的的时间
			currentTime: "00:00",
			// 进度条的value值
			rangeValue: 0,
			// 进度条的最小值
			rangeMin: 0,
			// 进度条的最大值
			rangeMax: 232,
			// 进度条的颜色区间的取值
			background_size: "0%,100%",
			// 歌曲是否播放
			isPlay: false,
			// 初始音量大小
			volume: 50,
			// 播放顺序
			playSequence: "sequencePlay",
			// 创建一个新的音频对象
			audio: new Audio(),
			// 歌词是否在显示
			lyricIsShow: false,
			// 让歌词显示
			lyrictransform: "",
			// 歌词显示的话图片会翻转
			imgTransform: "",
			// 歌词背景的大图片
			bgImg: "",
			// 歌词内容
			nowLryic: "",
		};
	},
	methods: {
		// 进度条拖动事件
		handleInput() {
			// 针对谷歌浏览器 自己做了事件 让滑块滑过的背景色和未滑过的颜色不一致
			this.background_size =
				(this.rangeValue / this.rangeMax) * 100 + "%,100%";
		},
		// 播放
		play() {
			this.handleLyric();
			const singerImg = document.querySelector(".singer-img>img");
			singerImg.style.animationPlayState = "running";
			this.isPlay = true;
			this.audio.volume = this.volume / 100;
			this.audio.play();
			this.audio.addEventListener("timeupdate", () => {
				this.rangeValue = this.audio.currentTime;
				this.currentTime = this.moment
					.unix(this.audio.currentTime)
					.format("mm:ss");
			});
		},
		// 暂停
		paused() {
			const singerImg = document.querySelector(".singer-img>img");
			singerImg.style.animationPlayState = "paused";
			this.isPlay = false;
			this.audio.pause();
		},
		// 获取初始的音乐列表
		getSongList() {
			this.$store.dispatch("getChineseNewSong", this);
		},
		// 进度条改变
		rangeChange() {
			this.audio.currentTime = this.rangeValue;
			this.background_size =
				(this.rangeValue / this.rangeMax) * 100 + "%,100%";
		},
		// 静音
		mute() {
			this.volume = 0;
		},
		// 取消静音
		cancelmute() {
			this.volume = 50;
		},
		// 显示音量
		vloumeShow() {
			document.querySelector(".block").style.display = "flex";
		},
		// 隐藏音量
		vloumeHide() {
			document.querySelector(".block").style.display = "none";
		},
		// 显示歌词
		lyricShow() {
			if (this.lyricIsShow) {
				this.lyricIsShow = false;
				this.lyrictransform = "";
				this.imgTransform = "";
			} else {
				this.lyricIsShow = true;
				this.lyrictransform = "translateY(0)";
				this.imgTransform = "rotate(180deg)";
			}
		},
		// 将歌词切分并处理
		handleLyric() {
			// 获取到当前歌曲的歌词 顺便切割好
			if (this.nowPlayMusic.lyric) {
				// 先获取到存放歌词的div
				let lyricContent = document.querySelector(".lyric-content");
				// // 初始化top值为0
				lyricContent.style.top = 0;
				this.nowLryic = this.nowPlayMusic.lyric;
				// 对歌词进行一些切割处理
				let lrcArr = this.nowLryic.split("[");
				// 定义一个空的变量来保存每一句歌词(带标签)
				let html = "";
				// 定义一个空的变量来保存每一句歌词(纯文本)
				let text = "";
				// 保存每一句歌词总的时间
				let allTime = "";
				// 切割出的分+秒
				let time = "";
				// 计算出的总秒数
				let timer = "";
				// 定义一个空数组 接分离开的时间和歌词
				let arr = [];
				lrcArr.forEach((item) => {
					// 在切割出纯的时间与文本分离的数组
					arr = item.split("]");
					// arr[1]输出的歌词部分
					text = arr[1];
					// 获取总的时间;
					allTime = arr[0].split(".");
					// 切割出的分+秒
					time = allTime[0].split(":");
					// 计算出的总秒数
					timer = time[0] * 60 + time[1] * 1;
					// 如果歌词部分不为空
					if (text) {
						// html 赋值一个p标签
						html += `<p id='${timer}'>${text}</p>`;
					}
					// 把html 文本添加到歌词div中
					lyricContent.innerHTML = html;
				});
				// 获取所有的p标签
				let allP = lyricContent.querySelectorAll("p");
				// 歌词的初始top值
				let top = 0;
				// 监听音乐播放进度实现歌词同步
				this.audio.addEventListener("timeupdate", () => {
					// 获取当前播放时间
					let curTime = parseInt(this.audio.currentTime);
					// 把获取的时间和p标签的id名进行对比 如果相同就让这个p标签变色
					if (document.getElementById(curTime)) {
						// 先把每句歌词取消class
						for (let i = 0; i < allP.length; i++) {
							allP[i].removeAttribute("class");
						}
						document.getElementById(curTime).className =
							"is-active";
						if (allP[top + 5].id == curTime) {
							lyricContent.style.top = `${-36 * top}px`;
							top++;
						}
						// 给匹配的添加class
					}
				});
				this.audio.addEventListener("ended", () => {
					const singerImg = document.querySelector(".singer-img>img");
					singerImg.style.animationPlayState = "paused";
					lyricContent.style.top = 0;
					this.isPlay = false;
					this.rangeValue = 0;
				});
			} else {
				this.nowLryic = "";
			}
		},
	},
	mounted() {
		this.handleLyric();
		this.bgImg = `url('${
			this.nowPlayMusic.songimg
				? this.nowPlayMusic.songimg
				: require("../assets/img/kugou.png")
		}')`;
		this.rangeMax =
			this.nowPlayMusic.time.split(":")[0] * 60 +
			parseInt(this.nowPlayMusic.time.split(":")[1]);
		this.audio.src = this.nowPlayMusic.url;
		// 页面启动调用action方法的函数 并把this传过去
		this.getSongList();
	},
	computed: {
		...mapState(["playSongList", "nowPlayMusic"]),
	},
	watch: {
		// 监视点击的音乐
		nowPlayMusic() {
			this.handleLyric();
			// 歌词页面背景图片跟歌手图片一致
			this.bgImg = `url('${
				this.nowPlayMusic.songimg
					? this.nowPlayMusic.songimg
					: require("../assets/img/kugou.png")
			}')`;
			// 每次更换音乐奖进度条重置
			this.rangeValue = 0;
			// 歌曲的路径重新更换
			this.audio.src = this.nowPlayMusic.url;
			// 歌曲的音乐
			this.audio.volume = this.volume / 100;
			// 进度条最大值
			this.rangeMax =
				this.nowPlayMusic.time.split(":")[0] * 60 +
				parseInt(this.nowPlayMusic.time.split(":")[1]);

			// 切换播放图标
			this.isPlay = true;
			// 歌曲开始of
			this.audio.play();
			// 歌曲图片开始旋转
			const singerImg = document.querySelector(".singer-img>img");
			singerImg.style.animationPlayState = "running";
			// 给音频添加时间更新事件
			this.audio.addEventListener("timeupdate", () => {
				this.rangeValue = this.audio.currentTime;
				this.currentTime = this.moment
					.unix(this.audio.currentTime)
					.format("mm:ss");
			});
		},
		// 监控进度条
		rangeValue() {
			this.background_size =
				(this.rangeValue / this.rangeMax) * 100 + "%,100%";
		},
		// 监视音量的变化 控制音频的音量
		volume() {
			this.audio.volume = this.volume / 100;
		},
	},
};
</script>
<style lang="scss">
.footer-player {
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 66px;
		background-color: #f5faff;
		z-index: 1000;
		i {
			font-family: "iconfont";
			color: #6e7071;
			cursor: pointer;
			&:hover {
				color: #5192fe;
			}
		}
		// 进度条 start
		.range {
			position: relative;
			width: 100%;
			height: 10px;
			input {
				position: absolute;
				top: -4px;
				left: 0;
				width: 100%;
				height: 10px;
				border: 4px solid transparent;
				border-left: 0;
				border-right: 0;
				// 清除默认的样式
				-webkit-appearance: none;
				background-color: #dee3e6;
				background: -webkit-linear-gradient(#5192fe, #5192fe) no-repeat
					#ececec;
				background-size: 0% 100%;
				cursor: pointer;
				box-sizing: border-box;
				background-clip: padding-box;

				// 谷歌浏览器的滑块样式 start
				&::-webkit-slider-thumb {
					display: none;
					-webkit-appearance: none;
					width: 10px;
					height: 10px;
					border: 0;
					border-radius: 50%;
					background-color: #5192fe;
				}
				// 谷歌浏览器的滑块样式 end

				// 火狐浏览器滑块样式 start
				// 滑块颜色
				&::-moz-range-thumb {
					opacity: 0;
					width: 10px;
					height: 10px;
					border: 0;
					border-radius: 50%;
					background-color: #5192fe;
				}
				// 滑块已经滑动过的进度条颜色
				&::-moz-range-progress {
					background-color: #5192fe;
					width: 100%;
					height: 10px;
					border: 4px solid transparent;
					border-left: 0;
					border-right: 0;
					box-sizing: border-box;
					background-clip: padding-box;
				}
				// 火狐浏览器滑块样式 end

				&:hover::-webkit-slider-thumb {
					display: block;
				}
				&:hover::-moz-range-thumb {
					opacity: 1;
				}
			}
		}
		// 进度条 end

		.el-row {
			width: 100%;
			height: 56px;
			.el-col {
				height: 50px;
				// 专辑 start
				.album {
					display: flex;
					align-items: center;
					height: 50px;
					// 专辑图片 start
					.album-picture {
						overflow: hidden;
						position: relative;
						width: 50px;
						height: 100%;
						margin-left: 8px;
						border-radius: 5px;
						cursor: pointer;
						img {
							width: 50px;
							height: 100%;
						}
						.fill-screen {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							width: 50px;
							height: 50px;
							line-height: 50px;
							text-align: center;
							background-color: rgba(0, 0, 0, 0.5);
							i {
								display: inline-block;
								font-size: 28px;
								color: #fff;
							}
						}
						&:hover .fill-screen {
							display: block;
						}
					}
					// 专辑图片 end

					// 专辑其它 start
					.album-other {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 246.94px;
						height: 50px;
						margin-left: 15px;
						// 专辑名称 start
						.album-name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 5px;
							font-size: 14px;
							color: #333;
						}
						// 专辑名称 end

						// 专辑功能 start
						.album-function {
							display: flex;
							justify-content: space-between;
							width: 115px;
							margin-bottom: 5px;
							.love {
								i {
									font-size: 19px;
								}
							}
							.download {
								i {
									display: inline-block;
									font-size: 18px;
									transform: translate(0, -2px);
								}
							}
							.comment {
								i {
									font-size: 19px;
								}
							}
							.more {
								i {
									font-size: 17px;
								}
							}
						}
						// 专辑功能 end
					}
					// 专辑其它 end
				}
				// 专辑 end

				// 播放控件 start
				.play-control {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					i {
						color: #5192fe;
						&:hover {
							color: #4983e5;
						}
					}
					.previous {
						margin-right: 20px;
						i {
							display: inline-block;
							font-size: 22px;
							transform: rotateY(180deg);
						}
					}
					.play {
						i {
							font-size: 44px;
						}
					}
					.next {
						margin-left: 20px;
						i {
							font-size: 22px;
						}
					}
				}
				// 播放控件 end

				// 音乐控件 start
				.music-control {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 50px;
					padding-right: 20px;
					// 时间 start
					.time {
						font-size: 12px;
						color: #818385;
						cursor: pointer;
					}
					// 时间 end

					// 音量 start
					.volume {
						position: relative;
						margin-left: 20px;
						.block {
							display: none;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							position: absolute;
							left: -25px;
							bottom: 40px;
							width: 64px;
							height: 200px;
							border: 1px solid #ebeef5;
							border-radius: 4px;
							background-color: #fff;
							box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
							.number {
								margin-top: 10px;
								font-size: 12px;
								color: #858585;
							}
							&::after {
								content: "";
								position: absolute;
								display: block;
								left: calc(50% - 10px);
								bottom: -8px;
								border-width: 10px;
								width: 0;
								height: 0;
								border-color: transparent;
								border-style: solid;
								border-top-color: #fff;
								border-bottom-width: 0;
								z-index: 99;
							}
							.el-slider__runway {
								width: 4px;
								height: 144px !important;
								background-color: #ebebeb;
								.el-slider__bar {
									width: 4px;
									background-color: #5192fe;
								}
								.el-slider__button-wrapper {
									left: -16px;
									.el-slider__button {
										width: 14px;
										height: 14px;
										border: 0;
										background-color: #5192fe;
									}
								}
							}
						}
						i {
							font-size: 22px;
						}
					}
					// 音量 end

					// 播放顺序 start
					.play-sequence {
						margin-left: 10px;
						i {
							font-size: 20px;
						}
					}
					// 播放顺序 end

					// 歌词 start
					.lyric {
						margin: 0 5px 0 10px;
						i {
							font-size: 30px;
						}
					}
					// 歌词 end

					.play-list {
						i {
							display: flex;
							align-items: center;
							font-size: 34px;
							span {
								font-size: 14px;
							}
						}
					}
				}
				// 音乐控件 end
			}
		}
	}
	// 歌词 start
	.lyricPage {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100vh - 66px);
		color: #fff;
		transform: translateY(100vh);
		transform-origin: 50% 100%;
		transition: all 0.5s;
		z-index: 999;
		background-repeat: no-repeat;
		background-size: cover;
		.bg-filter {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.9);
			z-index: -99;
		}
		.music-name {
			margin-top: 50px;
			font-size: 24px;
			font-weight: 700;
			text-align: center;
			font-family: "微软雅黑";
		}
		.singer-name {
			margin-top: 20px;
			font-size: 16px;
			text-align: center;
			color: #b6aea3;
		}
		.singer-img {
			overflow: hidden;
			width: 200px;
			height: 200px;
			margin: 0 auto;
			margin-top: 50px;
			border-radius: 50%;
			img {
				width: 200px;
				height: 200px;
				animation: rotate 20s linear infinite;
				animation-play-state: paused;
			}
		}
		@keyframes rotate {
			from {
				transform: rotate(0);
			}
			to {
				transform: rotate(360deg);
			}
		}
		.lyric-all {
			overflow: hidden;
			height: 400px;
			margin-top: 50px;
			.lyric-content {
				position: relative;
				top: 0;
				left: 0;
				text-align: center;
				transition: all 0.5s;
				p {
					line-height: 36px;
					font-size: 18px;
					font-family: "微软雅黑";
					transition: all 0.5s;
				}
				.is-active {
					font-size: 22px;
					color: #f9d982;
				}
			}
		}

		.null-lyric {
			margin-top: 100px;
			font-size: 30px;
			color: #f9d982;
			text-align: center;
		}
	}
	// 歌词 end
}
</style>
